<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            let i = 1;
            $("#more").click(function () {
                let d = $("#d").clone(true);
                d.attr("id", "d" + i);
                $(this).before(d);

                // 此时克隆出来的div区域与原始区域是完全一致的
                // 因此,当选择了文件之后克隆,会同时将文件克隆过来
                // 我们需要清空文件选择器的内容
                $("#d" + i + " input").val("")
                i++;
            });
            $("a").click(function(){
                // if($(this.parentNode).attr("id") != "d"){
                //     $(this.parentNode).remove();
                // }
                if($(this).parent().attr("id") != "d"){
                    $(this).parent().remove();
                }
            });
        })
    </script>
</head>
<body>
<!--
    1.当点击上传更多的时候,页面中新增一块与原div一致的区域,id不能重复
        区域中包含了文件选择器与删除链接
        如果选择了文件之后点击上传更多,原来的文件选择器的内容不发生改变,新增的文件选择器中没有任何内容
    2.删除功能,删除时可以删除新增出来的div区域,原始的不能删除
-->
<div id="d">
    <input type="file">
    <a href="javascript:;">删除</a>
</div>
<button id="more">上传更多</button>
</body>
</html>